@charset "utf-8";
@import "common";

.news-box{
	margin-top: 50px;
	.news-warp{
		margin-top: 40px;
		h4{
			color: #ff6900;
			font-size: 30px;
			margin-bottom: 40px;
		}
		.news-img-box{
			.news-img{
				margin-bottom: 90px;
				img{
					width: 450%;
				}
			}
		}
	}
}
.news-cont-box{
	.news-cont{
		padding-left:30px;
		padding-bottom: 8%;
		position: relative;
		.title{
			font-size: 18px;
			margin: 0;
		}
		h6{
			font-size: 14px;
		}
		p{
			font-size: 14px;
		}
		.btn{
			position: absolute;
			right: 2%;
			bottom: 0;
			font-size: 14px;
			width: 100px;
			height: 35px;
			border-radius: 35px;
			border: 1px solid #ff6900;
			color: #ff6900;
			background-color: #fff;
			&:hover{
				background-color: #ff6900;
				color: #fff;
			}
			&:hover+.title{
				color: #ff6900;
			}
		}
	}
	.button{
		position: relative;
		font-size: 0;
		margin-top: 10%;
		margin-bottom: 3%;
		button{
			background-color: #fff;
			font-size: 12px;
			border: 1px solid #dddddd;
			&:hover{
				color: #fff;
				background-color: #e34637;
				border-color: #e34637;
			}
		}
		&::before{
			content: "";
			display: block;
			border: 1px dashed #dddddd;
			width: 230%;
			position: absolute;
			top: -130%;
			left: -70%;
		}
	}
}
@media only screen and (min-width:768px) and (max-width:991px) {
	.news-box{
		.news-warp{
			.news-img-box{
				.news-img{
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.news-cont-box{
		.news-img-box{
			.news-img{
				.news-img{
					width: 100%;
				}
			}
		}
	}
	.news-cont-box{
		.news-cont{
			.btn{
				position: absolute;
				right: 2%;
				bottom: 16%;
				font-size: 14px;
				width: 100px;
				height: 35px;
				border-radius: 35px;
				border: 1px solid #ff6900;
				color: #ff6900;
				background-color: #fff;
				&:hover{
					background-color: #ff6900;
					color: #fff;
				}
				&:hover+.title{
					color: #ff6900;
				}
			}
		}
		.button{
			&::before{
				content: "";
				display: block;
				border: 1px dashed #dddddd;
				width: 220%;
				position: absolute;
				top: -130%;
				left: -70%;
			}
		}
	}
}
@media only screen and (min-width:320px) and (max-width:767px) {
	.news-box{
		.news-warp{
			.news-img-box{
				.news-img{
					img{
						width: 100%;
					}
				}
			}
		}
	}
	.news-cont-box{
		.news-img-box{
			.news-img{
				text-align: center;
				margin: 5% auto;
				img{
					width: 97%;
				}
			}
		}
		.news-cont{
			.btn{
				font-size: 12px;
				width: 70px;
				height: 30px;
			}
			.title{
				font-size: 14px;
			}
			p{
				font-size: 12px;
				text-align: justify;
			}
		}
		.button{
			text-align: center;
			&::before{
				width: 80%;
				position: absolute;
				top: -80%;
				left: 10%;
			}
		}
	}
}